<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from "vue";
import type { Ref } from "vue";
import {
  getDoctorList,
  getDoctorKind,
  getDisease,
  getComprehensive,
} from "@/api/famous";
import { useRouter } from "vue-router";
import { useCounterStore } from "@/stores/counter";

const useStore = useCounterStore();
const router = useRouter();
// 搜索框
const search: Ref<string> = ref("");
function searchInput() {}
// 医生信息
interface IDoctorInfo {
  id: number;
  kind: string;
  hospital: string;
  position: string;
  name: string;
  image: string;
  desc: string;
  evaluate:string
  disease:string
}
const doctorInfoList: Ref<IDoctorInfo[]> = ref([]);

// 分类信息
interface IDoctorKind {
  text: string;
  value: string;
}
const doctorKind: Ref<IDoctorKind[]> = ref([]);
const doctorComprehensive: Ref<IDoctorKind[]> = ref([]);
const doctorDisease: Ref<IDoctorKind[]> = ref([]);
const doctorValue = ref(0);
const doctorComValue = ref(0);
const doctorDisValue = ref(0);
// 获取分类所需的数据
const kindEle = ref(null);
const conEle = ref(null);
const disEle = ref(null);
const kindName: Ref<string> = ref("");
const canName: Ref<string> = ref("");
const disName: Ref<string> = ref("");
function kindChange() {
  nextTick(() => {
    // console.log(kindEle);

    const info = doctorKind.value.filter(
      (item) => item.value === kindEle.value.modelValue
    );
    kindName.value = info[0].text;

    const coninfo = doctorComprehensive.value.filter(
      (item) => item.value === conEle.value.modelValue
    );
    canName.value = coninfo[0].text;
    // console.log(kindName.value);
    
    
    const disinfo = doctorDisease.value.filter(
      (item) => item.value === disEle.value.modelValue
    );
    disName.value = disinfo[0].text;
    
    // 获取分类对应的数据
    getDoctorList({ kinds: kindName.value, evaluate: canName.value,disease: disName.value }).then(
      (res) => {
        // console.log(res.data);
        doctorInfoList.value = res.data.data;
      }
    );
  });
}

async function fn() {
  const res = await getDoctorKind();
  doctorKind.value = res.data.data;
  const res1 = await getComprehensive();
  doctorComprehensive.value = res1.data.data;
  const res2 = await getDisease();
  doctorDisease.value = res2.data.data;
}
onMounted(async () => {
  getDoctorList().then((res) => {
    doctorInfoList.value = res.data;
  });
  await fn();
});
// 点击预约
function reservationClick(id: number) {
  useStore.setReservationId(id);
  router.push("/reservationlist");
}

function upAddress() {
  router.push("/city");
}
</script>

<template>
  <div class="header">
    <div @click="upAddress">
      <van-icon name="location" />
      <span v-if="useStore.city"> {{ useStore.city }}</span>
      <span v-else>北京</span>
    </div>
    <van-search
      v-model="search"
      placeholder="请输入搜索关键词"
      @input="searchInput"
    />
    <van-icon name="chat-o" />
  </div>
  <!-- 下拉菜单和筛选 -->
  <van-dropdown-menu>
    <van-dropdown-item
      @change="kindChange"
      v-model="doctorComValue"
      :options="doctorComprehensive"
      ref="conEle"
    />
    <van-dropdown-item
      @change="kindChange"
      v-model="doctorValue"
      :options="doctorKind"
      ref="kindEle"
    />
    <van-dropdown-item
      @change="kindChange"
      v-model="doctorDisValue"
      :options="doctorDisease"
      ref="disEle"
    />
    <van-dropdown-item title="筛选"></van-dropdown-item>
  </van-dropdown-menu>
  <div class="main">
    <!-- 显示数据 -->
    <van-card
      v-for="item in doctorInfoList"
      :key="item.id"
      :desc="item.hospital"
      :title="item.name + '————' + item.kind"
      :thumb="item.image"
    >
      <template #tags>
        <van-tag plain type="primary">{{ item.evaluate }}</van-tag>
        <van-tag plain type="primary">{{ item.disease }}</van-tag>
      </template>
      <template #footer>
        <van-button
          size="mini"
          type="primary"
          @click="reservationClick(item.id)"
          >预约</van-button
        >
      </template>
    </van-card>
  </div>
</template>

<style lang="scss" scoped>
.header {
  height: 0.44rem;
  font-size: 0.2rem;
  display: flex;
  align-items: center;
}
.van-search {
  flex: 1;
  background-color: #f7fdff;
}
.van-icon {
  width: 0.2rem;
  padding: 0 0.05rem;
}
.main {
  overflow: auto;
}
</style>
